<template>
  <!-- 登录 -->
  <div class="loginWrapper">
    <div class="login">
      <div class="left">
        <div class="logo">
          <img src="@/assets/img/logo.png" alt="" />
        </div>
        <div class="title">打造企业智能制造 公共产业服务平台</div>
        <div class="welcome">
          {{ isLogin ? "欢迎回来请登录您的账号" : "欢迎您!" }}
        </div>
        <!-- 表单区域 -->
        <el-form :rules="rules" ref="ruleForm" :model="ruleForm">
          <el-form-item
            :class="[focusStyle === 1 ? 'focus' : '']"
            prop="mailbox"
          >
            <div class="hint">邮箱</div>
            <el-input
              v-model="ruleForm.mailbox"
              placeholder="请输入你的邮箱"
              @focus="focusStyle = 1"
            ></el-input>
          </el-form-item>
          <el-form-item
            :class="[focusStyle === 2 ? 'focus' : '']"
            prop="password"
          >
            <div class="hint">密码</div>
            <el-input
              v-model="ruleForm.password"
              @focus="focusStyle = 2"
              show-password
              autocomplete="off"
              placeholder="请输入你的密码"
            ></el-input>
          </el-form-item>
          <el-form-item
            :class="[focusStyle === 3 ? 'focus' : '']"
            prop="affirmPassword"
            v-if="!isLogin"
          >
            <div class="hint">确认密码</div>
            <el-input
              v-model="ruleForm.affirmPassword"
              @focus="focusStyle = 3"
              show-password
              autocomplete="off"
              placeholder="请确认密码"
            ></el-input>
          </el-form-item>
        </el-form>
        <!-- 注册复选框 -->
        <el-checkbox v-model="registerChecked" v-if="!isLogin">
          <div class="agreement">
            我已阅读并同意<a href="/">《宇喜科技协议》</a>
          </div>
        </el-checkbox>
        <!-- 登录复选框 -->
        <div class="loginChecked-wrapper" v-if="isLogin">
          <div class="LCW-left">
            <div class="box">
              <input type="checkbox" checked="checked"  v-model="loginChecked" id="point" />
              <label for="point"></label>
            </div>
            <p>记住密码</p>
          </div>
          <div class="LCW-right">忘记密码？</div>
        </div>
        <!-- 注册按钮 -->
        <el-button type="primary" class="register" v-if="!isLogin"
          >注册</el-button
        >
        <!-- 登录按钮 -->
        <div class="loginBtn" v-if="isLogin">
          <el-button type="primary" class="login" v-if="isLogin"
            >登录</el-button
          >
          <p @click="startRegister" v-if="isLogin">还没有账号？立即注册</p>
        </div>

        <p class="else">使用第三方{{ isLogin ? "登录" : "注册" }}</p>
        <div class="way">
          <img src="@/assets/img/weixin.png" alt="" />
          <img src="@/assets/img/BILIBILI_LOGO.png" alt="" />
          <img src="@/assets/img/toutiaologo.png" alt="" />
          <img src="@/assets/img/douyinlogo.png" alt="" />
        </div>
      </div>
      <div class="right">
        <img src="@/assets/img/3D_Creator_in_action-to_used_as_is.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.ruleForm.password !== '') {
          this.$refs.ruleForm.validateField('checkPass')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.ruleForm.password) {
        console.log(value, this.ruleForm.password)
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      isLogin: true,
      ruleForm: {
        mailbox: '', // 邮箱
        password: '', // 密码
        affirmPassword: '' // 确认密码
      },
      registerChecked: false, // 是否同意协议
      loginChecked: false, // 是否记住密码
      focusStyle: 0, // 0 是谁都没有获取焦点 1 是邮箱获取焦点 2 是密码框获取焦点 3 是确认密码框获取焦点
      // 验证规则
      rules: {
        mailbox: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          {
            type: 'email',
            message: '请输入正确的邮箱地址',
            trigger: ['blur', 'change']
          }
        ],
        password: [
          {
            min: 6,
            max: 16,
            message: '密码长度在 3 到 16 个字符',
            trigger: 'blur'
          },
          { validator: validatePass, trigger: 'blur' }
        ],
        affirmPassword: [{ validator: validatePass2, trigger: 'blur' }]
      }
    }
  },
  mounted () {
  },
  methods: {
    startRegister () {
      this.isLogin = false
    }
  }
}
</script>

<style lang="less" scoped>
@import url(./index.less);
</style>
